@charset 'UTF-8';
/*
 * @Author: mikey.zhaopeng 
 * @Date: 2021-06-17 03:22:07 
 * @Last Modified by: bastuu
 * @Last Modified time: 2021-08-30 00:03:00
 */

/* S 公共样式 */

* {
	margin: 0;
	padding: 0;
	// box-sizing: border-box;
}
html {
	font-size: 10px;
}
body {
	// width: 1200px;
	margin: 0 auto;
	background: #fff;
}
ul,
li {
	list-style: none;
}
a {
	text-decoration: none;
}
/* 水平垂直居中 */
.fl-ju-al {
	display: flex;
	justify-content: center;
	align-items: center;
}
.container {
	// overflow: hidden;
	margin-bottom: 40px;
	width: 100%;
	height: 400px;
	border-radius: 20px;
	box-shadow: 0 0 2px #3498db;
}
h1 {
	color: #2c3e50;
	text-shadow: 1px 1px 5px #2e86de;
	margin: 20px 0;
}
/* E 公共样式 */

/* S 社交按钮发光效果 */
.con-icon {
	background-color: #34495e;
	// 由于给了背景 影响 下方伪元素层级问题  添加定位
	position: relative;
	z-index: 1;
	ul {
		// flex 布局  子元素默认为水平 使 li 达到浮动的效果
		display: flex;
		li {
			margin: 0 18px;
			a {
				position: relative;
				display: block;
				width: 50px;
				height: 50px;
				font-size: 28px;
				color: #fff;
				line-height: 50px;
				text-align: center;
				border: 1px solid transparent;
				border-radius: 50%;
				transition: 1s;
				background: #34495e;
				// z-index: 1;
				&::before {
					content: '';
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					border-radius: 50%;
					background: #2e86de;
					transform: scale(0.8);
					transition: 1s;
					z-index: -2;
				}
				&:hover {
					border: 1px solid #2e86de;
					text-shadow: 1px 1px 15px #2e86de;
					&::before {
						transform: scale(1.05);
						box-shadow: 0 0 14px 2px #2e86de;
					}
				}
			}
		}
	}
}
/* E 社交按钮发光效果 */

/* S 电池充电效果 */
.batery-box {
	position: relative;
	@color: #fff;
	background: #ddd;
	.box {
		position: relative;
		width: 140px;
		margin: 50px auto;
		.bat-header {
			position: absolute;
			left: 50%;
			top: 0;
			width: 26px;
			height: 10px;
			transform: translate(-50%, -10px);
			background: rgba(255, 255, 255, 0.8);
			box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.8);
			border-radius: 5px 5px 0 0;
			z-index: 2;
		}
		.battery {
			// overflow: hidden;
			position: relative;
			background: @color;
			height: 220px;
			box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.2);
			border-radius: 15px 15px 5px 5px;
			z-index: 1;
			// animation: charging-bg 10s linear infinite;
			&::after {
				content: '';
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				top: 80%;
				background: linear-gradient(to bottom, #7abcff 0%, #00bcd4 40%, #2196f3 100%);
				box-shadow: 0 14px 28px #000, 0 10px 10px rgba(9, 188, 215, 0.08);
				animation: charging 10s linear infinite;
				filter: hue-rotate(90deg);
				z-index: 1;
			}
		}
		.bat-copy {
			overflow: hidden;
			position: absolute;
			left: 0;
			top: 0;
			width: 140px;
			height: 220px;
			border-radius: 15px 15px 5px 5px;
			.g-wave {
				position: absolute;
				bottom: 25px;
				left: 50%;
				width: 300px;
				height: 300px;
				background: rgba(255, 255, 255, 0.8);
				border-radius: 45% 47% 44% 42%;
				transform: translate(-50%, 0);
				animation: move 10s linear infinite;
				z-index: 1;
				&:nth-child(2) {
					border-radius: 47% 52% 55% 48%;
					transform: translate(-50%, 0) rotate(135deg);
				}
				&:nth-child(3) {
					border-radius: 55% 47% 46% 47%;
					transform: translate(-50%, 0) rotate(135deg);
				}
			}
		}
	}
}
@keyframes charging {
	50% {
		box-shadow: 0 14px 28px rgba(0, 150, 136);
	}
	95% {
		top: 5%;
		filter: hue-rotate(0);
		border-radius: 0 0 5px 5px;
		box-shadow: 0 14px 28px rgba(4, 188, 213, 0.2);
	}
	100% {
		top: 0;
		filter: hue-rotate(0);
		border-radius: 15px 15px 5px 5px;
		box-shadow: 0 14px 28px rgba(4, 188, 213, 0.2);
	}
}
@keyframes move {
	100% {
		transform: translate(-50%, -160px) rotate(720deg);
	}
}
/* E 电池充电效果 */

/* S 电池充电效果2 */
.kuang {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: #000;
	filter: contrast(30);
	.droplet {
		position: absolute;
		width: 100px;
		height: 100px;
		border-radius: 50%;
		background-color: #fff;
		filter: blur(20px);
		animation: fall 3s linear infinite;
		opacity: 0;
	}
	.quan {
		position: absolute;
		width: 100px;
		height: 100px;
		border-radius: 50%;
		background-color: #fff;
		filter: blur(20px);
		animation: zhuan 3s infinite;
	}
	& div:nth-of-type(2) {
		animation-delay: 1.5s;
	}
	& div:nth-of-type(3) {
		animation-delay: 2s;
	}
	span {
		color: #000;
	}
}
@keyframes fall {
	0% {
		opacity: 0;
		transform: scale(0.8) translateY(-500%);
	}
	50% {
		opacity: 1;
		transform: scale(0.5) translateY(-100%);
	}
	100% {
		transform: scale(0.3) translateY(0px);
	}
}
.kuang div:nth-of-type(2) {
	animation-delay: 1.5s;
}
.kuang div:nth-of-type(3) {
	animation-delay: 2s;
}

/* E 电池充电效果2 */

/* S 智慧阴影 */
.shadowImg {
	.img-bg {
		position: absolute;
		margin: 100px;
		width: 400px;
		height: 300px;
		background: url(../images/333.jpeg) no-repeat;
		background-size: contain;
		&::after {
			position: absolute;
			content: '';
			width: 100%;
			height: 100%;
			background: inherit;
			background-position: -5px -5px;
			filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5)) blur(20px);
			z-index: -1;
			animation: oscillate 1s cubic-bezier(0.17, 0.67, 0.45, 1.32) infinite alternate;
		}
	}
}

@keyframes oscillate {
	from {
		transform: scale(1, 1);
	}

	to {
		transform: scale(1.3, 1.3);
	}
}
/* E 智慧阴影 */
